<template>
	<view class="">
		<view class="u-cb-white-bg padding-30">
			<view class="u-placeholder-color fsize-34">提示: 输入收款金额，并向会员出示收款码</view>
			<u-form
				:model="form"
				:rules="rules"
				ref="uForm"
				:errorType="['toast']"
				labelWidth="68"
				labelPosition="top">
				<u-form-item label="收款金额" prop="amount" borderBottom>
					<view class="u-flex">
						<view class="t-icon t-icon-yue mr-10" />
						<u-input
							type="digit"
							:focus="true"
							placeholder="请输入收款金额"
							v-model="form.amount"
							border="none">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="收款说明" prop="remarks " borderBottom>
					<u-input
						placeholder="可输入收款项目、物品等内容"
						v-model="form.remarks "
						border="none">
					</u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="width-260 buttom-btn">
			<u-button size="samll" type="error" text="生成收款码" @click="onCreateQR"/>
		</view>
		<u-modal :show="isShowQE" title="收款码" :closeOnClickOverlay="true" :showConfirmButton="false" @close="isShowQE=false">
			<view class="w-100">
				<view class="u-text-align-center">请打开微信, 点击'扫一扫'向我付款</view>
				<view class="mt-20 u-flex u-flex-column u-flex-items-center">
					<u-image  width="200px" height="200px" :src="QEImg" mode="" />
					<view class="u-text-align-center mt-20">
						<text class="">￥</text>
						<text class="fsize-42">{{form.amount}}</text>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				isShowQE: false,
				QEImg: '',
				form:{
					amount: '',
					remarks:''
				},
				rules:{
					amount:[
						{ required: true, message: '请填写金额', trigger: ['change','blur']},
						// { 
						// 	validator: (rule, value, callback) => {
						// 		return uni.$u.test.amount(value)
						// 	},
						// 	message: '请填写数额', 
						// }
					]
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			onCreateQR(){
				this.$refs.uForm.validate().then(res => {
					this.$reqGet('/GetPayQrCode', this.form).then(res=>{
						this.QEImg = res.Data.FQrCodeUrl
						this.isShowQE = true
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttom-btn{
		margin: 200rpx auto;
	}
</style>